<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import{getMedicineByType,addTempMedical} from "@/api/system/presc_temp";

import request from "@/utils/request.js";
const show_btn_med=ref(false);
const show_btn_exam=ref(false);
const show_xiyao=ref(false)
const Isadd_medical=ref(false)
const is_show_exam_table=ref(false)
const typeId=ref(0)
const xiyao_info=ref([])
let userId=localStorage.getItem('userId')

const add_xiyao=function (){
  is_show_exam_table.value=false
show_btn_exam.value=false
  show_btn_med.value=true
  show_xiyao.value=true
  typeId.value=1
}
const add_zhongyao=function (){
  is_show_exam_table.value=false
  show_btn_exam.value=false
  show_btn_med.value=true
  show_xiyao.value=true
  add_zhongyao.value=true
  typeId.value=2
}


const xiyaoData=ref([])
const add_medical=function (){
  Isadd_medical.value=true
  let medical={
    prescriptionTypeId:typeId.value
  }
  console.log(medical)

//发送请求
  getMedicineByType(medical).then(res=>{
    console.log(res)
    console.log(xiyaoData.value)
    xiyaoData.value=res.rows
  }).catch(err=>{
    console.log(err)
  })

}
const offShowAdd=function (){
  Isadd_medical.value=false
  show_box_exam.value=false

}
let medicinePrice=ref(0)
let medicineId=ref(0)
const add_xiyao_to_info=function (row){
  console.log(row)
  console.log(row.retailPrice)
  console.log(row.medicineId)
  medicineId.value=row.medicineId
  medicinePrice.value=row.retailPrice
  console.log(xiyao_info.value)
  xiyao_info.value.push(row)
  console.log(xiyao_info.value)
}

// const change_xiyao=function (row){
//   console.log(row)
//   console.log(row.medicineName)
//
//   console.log(xiyao_info.value)
// }
let groupNumber=ref()
let zuhao=[{value:1, label:'1'}, {value:2, label:'2'}, {value:3, label:'3'}, {value:4, label:'4'}, {value:5, label:'5'}]

let singleDose=ref()
let danci=[{value:'1', label:'1'}, {value:'2', label:'2'}, {value:'3', label:'3'}, {value:'4', label:'4'}, {value:'5', label:'5'}]

let usage=ref('')
let yongfa=[{value:'口服', label:'口服'}, {value:'注射', label:'注射'}, {value:'外用', label:'外用'},{value: '雾化',label: '雾化'},{value: '滴眼',label: '滴眼'},{value:'皮试',label: '皮试'}]

let days=ref()
let tian=[{value:'1', label:'1天'}, {value:'2', label:'2天'}, {value:'3', label:'3天'}, {value:'4', label:'4天'}, {value:'5', label:'5天'}]

let totalAmount=ref()
let zongliang=[{value:1, label:'1'}, {value:2, label:'2'}, {value:3, label:'3'}, {value:4, label:'4'}, {value:5, label:'5'}]

let unit=ref()
let danwei=[{value:'瓶', label:'瓶'}, {value:'盒', label:'盒'}, {value:'剂', label:'剂'}, {value:'副', label:'副'}]
//获取当前时间
const formatDate = (date) => {
  const year = date.getFullYear(); // 获取年份
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份并补零
  const day = String(date.getDate()).padStart(2, '0'); // 获取日期并补零
  return `${year}-${month}-${day}`; // 按照 yyyy-MM-dd 格式返回
}

let creationTime=ref('')

const add_temp_info=function (){
//获取当前时间
  const now = new Date(); // 获取当前时间
  // 调用格式化函数
  creationTime.value = formatDate(now); // 将格式化后的时间赋值给变量
  console.log(creationTime.value)
let tempType=typeId.value-1
  console.log(tempType)
  request({
    url:'/system/presc_temp',
    method:'post',
    data:{
      templateId:templateId.value,
      templateName:templateName.value,
      prescriptionType:tempType,
      templatePermission:templatePermission.value,
      diagnosis:diagnosis.value,
      creationTime:creationTime.value,
      adminId:userId,
      prescriptionInfoId:prescriptionMedicineId.value,
      examinationInfoId:examinationInfoId.value
    }
  }).then(res=>{
    console.log(res)
    //返回上一级
    alert("创建成功")
    window.location.href="/system/medical/presc_temp"
  }).catch(err=>{
    console.log(err)
  })

}
//

let templateId=ref(0)
let templateName=ref('')
let templatePermission=ref('')
let diagnosis=ref('')
let temp_shuoming=ref('')
let prescriptionMedicineId=ref(0)
let examinationInfoId=ref(0)
let visitRecordId=ref(null)



const final_xiyao=function (){
  let prescriptionMedicine={
    // prescriptionMedicineId:prescriptionMedicineId.value,
    medicineId:medicineId.value,
    medicineNum:totalAmount.value,
    medicinePrice:medicinePrice.value,
    groupNumber:groupNumber.value,
    singleDose:singleDose.value,
    usageMed:usage.value,
    daysMed:days.value,
    visitRecordId:prescriptionMedicineId.value,
    totalAmount:null
  }

  console.log(prescriptionMedicine)

  request({
    url:'/system/prescriptionMedicine/insert',
    method:'post',
    data:prescriptionMedicine
      }).then(res=>{
    console.log(res)
    //同时添加关系表
    if (res===1){
    let temp_medical={
      prescTempId:templateId.value,
      prescMedicalId:prescriptionMedicineId.value
    }
      addTempMedical(temp_medical).then(res=>{
        console.log(res)
        alert("添加成功")
      }).catch(err=>{
        console.log(err)
      })
    }
  })
  .catch(err=>{
    console.log(err)
  })

}

const add_jiancha=function (){
  Isadd_medical.value=false;
  show_btn_med.value=false;
  show_btn_exam.value=true;
  show_xiyao.value=false;
  is_show_exam_table.value=true;
}
const exam_list=ref([])
const show_box_exam=ref(false);

const add_exam=function (){
  show_box_exam.value=!show_box_exam.value;
  //获取所有检查项目
  request({
    url:'/system/exam_project/list',
    method:'get'
  }).then(res=>{
    console.log(res)
    exam_list.value=res.rows
  }).catch(err=>{
    console.log(err)
  })

  console.log(exam_list.value)
}
let exam_final_data=ref([])
let itemName=ref('')
const add_exam_to_info=function (row){
  if (exam_final_data.value.length >=1){
    alert("只能添加一个检查项目")
    return
  }
  console.log(row.itemName)
  itemName.value=row.itemName
  exam_final_data.value.push(row)


}

let part=ref('')
let buwei=[{value:'头部', label:'头部'}, {value:'颈部', label:'颈部'}, {value:'胸部', label:'胸部'}, {value:'腹部', label:'腹部'}, {value:'背部', label:'背部'}, {value:'腰部', label:'腰部'}, {value:'臀部', label:'臀部'}, {value:'四肢', label:'四肢'}, {value:'全身', label:'全身'}]
// let exam_type=ref('')
// let exam_type_list=[{value:'影像学检查', label:'影像学检查'}, {value:'病理检查', label:'病理检查'}, {value:'功能检查', label:'功能检查'},
let remarks=ref('')
let quantity=ref(0)
let shuliang=[{value:1, label:'1'}, {value:2, label:'2'}, {value:3, label:'3'}, {value:4, label:'4'}, {value:5, label:'5'}]

const add_exam_info=function (){
  const now = new Date(); // 获取当前时间
  // 调用格式化函数
  creationTime.value = formatDate(now); // 将格式化后的时间赋值给变量
  console.log(creationTime.value)


  let temp_data={
    templateId:templateId.value,
    templateName:templateName.value,
    prescriptionType:2,
    templatePermission:templatePermission.value,
    diagnosis:diagnosis.value,
    creationTime:creationTime.value,
    adminId:userId,
    prescriptionInfoId:prescriptionMedicineId.value,
    examinationInfoId:examinationInfoId.value
  }
  let exam_data={
    name:itemName.value,
    part:part.value,
    quantity:quantity.value,
    usageExam:usage.value,
    remarks:remarks.value,
  }
  console.log(temp_data)
  console.log(exam_data)

  //调用接口
  request({
    url:'/system/presc_temp',
    method:'post',
    data:temp_data
  }).then(res=>{
    console.log(res)
    if(res.code===200){
      request({
        url:'/system/examinationInfo/insert',
        method:'post',
        data:exam_data
      }).then(res=>{
        console.log(res)
          alert("添加成功")
          //返回上一级
          window.location.href="/system/medical/presc_temp"
      })
    }
  }).catch(err=>{
    console.log(err)
  })

}

const fanhui=function (){
  window.location.href="/system/medical/presc_temp"
}


</script>

<template>
  <div class="root_box">
    <div class="check_title">
      <button @click="add_xiyao" >西成药处方</button>
      <button @click="add_zhongyao">中药处方</button>
      <button @click="add_jiancha">检查项目</button>
      <button @click="add_medical" v-show="show_btn_med">添加药品</button>
      <button @click="add_exam" v-show="show_btn_exam">添加项目</button>
      <button @click="add_temp_info" v-show="show_btn_med">确定</button>
      <button @click="add_exam_info"  v-show="show_btn_exam">确定</button>
      <button @click="fanhui">返回</button>
    </div>
    <div class="med_temp">
      <h2>创建模板</h2>
      <div class="temp_top">
        <div class="input-group">
          模板编号:<input type="text" class="input-field" placeholder="请输入模板编号" v-model=templateId>
          模板名称:<input type="text" placeholder="请输入模板名称" class="input-field" v-model="templateName">

          <div class="radio-group">
            <input type="radio" id="private" name="temp" value="私人模板"  v-model="templatePermission">
            <label for="private">私人模板</label>
            <input type="radio" id="public" name="temp" value="公共模板"  v-model="templatePermission">
            <label for="public">公共模板</label>
          </div>
        </div>
      </div>

      <!--        <label for="description">模板说明</label>-->
      <!--        <input type="text" placeholder="请输入模板描述" class="input-field" style="width: 650px" >-->
      诊断:<input type="text" placeholder="请输入诊断病名" class="input-field" v-model="diagnosis">
      模板说明: <input type="text" placeholder="清输入模板说明" class="input-field" style="width: 300px; margin-left: 5px" v-model="temp_shuoming">
      处方编号: <input type="text" placeholder="请输入处方编号" class="input-field" style="width: 300px; margin-left: 5px" v-model="prescriptionMedicineId">
      项目编号: <input type="text" placeholder="请输入检查项目编号" class="input-field" style="width: 300px; margin-left: 5px" v-model="examinationInfoId">

    </div>

    <div v-show="show_xiyao" class="med_temp">
    <el-table :data="xiyao_info" style="width: 100%">
<!--      <el-table-column prop="prescriptionMedicineId" label="序号" width="180" />-->
<!--      <el-table-column prop="groupNumber" label="组号" width="180" />-->
      <el-table-column lable="组号" >
        <el-select v-model="groupNumber" placeholder="请选择组号">
          <el-option
              v-for="item in zuhao"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
      </el-table-column>
      <el-table-column prop="medicineId" label="药品编号" width="180" />
      <el-table-column prop="medicineName" label="药品名称"  />
<!--      <el-table-column prop="singleDose" label="单次用量"/>-->
      <el-table-column lable="单次用量">
        <el-select v-model="singleDose" placeholder="单次用量">
          <el-option
            v-for="item in danci"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          /></el-select>
      </el-table-column>
<!--      <el-table-column prop="usage" label="用法"/>-->
      <el-table-column lable="用法">
        <el-select v-model="usage" placeholder="用法">
          <el-option
            v-for="item in yongfa"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          /></el-select>
      </el-table-column>
<!--      <el-table-column prop="days" label="天数" />-->
      <el-table-column lable="天数">
        <el-select v-model="days" placeholder="天数">
          <el-option
            v-for="item in tian"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          /></el-select>
      </el-table-column>
<!--      <el-table-column prop="totalAmount" label="总量" />-->
      <el-table-column lable="总量">
<el-select v-model="totalAmount" placeholder="总量">
          <el-option
            v-for="item in zongliang"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          /></el-select>
      </el-table-column>
<!--      单位-->
      <el-table-column lable="单位">
        <el-select v-model="unit" placeholder="单位">
          <el-option
              v-for="item in danwei"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
      </el-table-column>
      <el-table-column label="操作" width="360">
        <template #default="scope">
          <el-button @click="final_xiyao(scope.row)">确定</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>



    <div v-show="Isadd_medical" class="add_medical_box">
      <h2>西/成药处方</h2> <button @click="offShowAdd">确定</button>
      <el-table :data="xiyaoData" style="width: 100%">
        <el-table-column prop="medicineName" label="药品名称" width="180" />
        <el-table-column prop="medicineId" label="药品编号" width="180" />
        <el-table-column prop="prescriptionName" label="收费类别" width="180" />
        <el-table-column prop="medicineSpecification" label="规格"  />
        <el-table-column prop="manufacturerName" label="厂家" />
        <el-table-column prop="shelfPosition" label="库存"  />
        <el-table-column prop="retailPrice" label="价格"  />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="add_xiyao_to_info(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>


    <div v-show="show_box_exam" class="add_medical_box" style="top: 150px">
    <h3>检查项目内容</h3> <button @click="offShowAdd">确定</button>
     <el-table :data="exam_list">
      <el-table-column prop="itemName" label="检查项目名称"  />
      <el-table-column prop="categoryId" label="检查项目编号" />
      <el-table-column prop="retailPrice" label="价格" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="add_exam_to_info(scope.row)">添加</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>

    <div class="show_add_exam" v-show="is_show_exam_table" >
      <el-table :data="exam_final_data" >
        <el-table-column prop="itemName" label="检查项目名称"  />
<!--        <el-table-column prop="part" label="部位" />-->
        <el-table-column label="部位">
          <el-select v-model="part" placeholder="部位">
            <el-option
              v-for="item in buwei"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /></el-select>
        </el-table-column>
        <el-table-column label="数量">
          <el-select v-model="quantity" placeholder="数量">
            <el-option
                v-for="item in shuliang"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            /></el-select>
        </el-table-column>
<!--        <el-table-column prop="usageExam" label="用法" />-->
        <el-table-column label="用法">
          <el-select v-model="usage" placeholder="用法">
            <el-option
                v-for="item in yongfa"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            /></el-select>
        </el-table-column>
        <el-table-column prop="retailPrice" label="价格" />
<!--        <el-table-column prop="remarks" label="备注" />-->
        <el-table-column label="备注">
          <el-input v-model="remarks" placeholder="备注"></el-input>
        </el-table-column>
      </el-table>

    </div>


  </div>

</template>

<style scoped>
.add_medical_box{
  width: 1200px;
  height: 500px;
  background-color: plum;
  text-align: center;
position: absolute;
  top: 300px;
  left: 300px;
  z-index: 10;
}
.med_temp {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  height: 30px;
}

.input-field:focus {
  border-color: #6200ea;
}

.temp_top {
  width: 100%;
}
.root_box {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding: 50px;

}


button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin:20px
}

button:hover {
  background-color: #0056b3;
}

button:active {
  background-color: #003d82;
}


</style>